<template>
	<view class="u-page">
		<u-sticky>
			<view class="search">
				<u-subsection class="scarch-subsection" :list="LeaveTypeOptions" :current="selType" @change="changeType"
					mode="subsection" inactiveColor="#3C9CFF" />
				<u-input class="scarch-name" placeholder="请输入学生的学号或姓名" shape="circle" v-model="selName">
					<template slot="suffix">
						<view class="scarch-btn-box">
							<uni-icons type="close" style="margin-right:10rpx" size="45rpx" color="lightgray"
								@click="clearStuName" />
							<u-button class="scarch-btn" @tap="getEliminateList" text="搜索" type="primary" size="small"
								plain />
						</view>
					</template>
				</u-input>
			</view>
		</u-sticky>
		<u-list class="list-box" @scrolltolower="scrolltolower" :preLoadScreen="queryParams.pageNum">
			<u-list-item class="list-item" v-for="(item, index) in eliminateList" :key="index">
				<span @click="checkEliinateInfo(item.id)">
					<p>{{item.sno}}&emsp;{{item.stuName}}</p>
					<p>开始时间：{{item.beginTime}}</p>
					<p>结束时间：{{item.endTime}}</p>
					<p>销假时间：{{item.createTime}}</p>
					<p>
						<span style="display:inline-block;width:50%">天数：{{item.duration / 10}}天</span>
						<span style="display:inline-block;width:50%">类型：
							<span v-for="(typeName,index) in LeaveTypeOptions" :key="index"
								v-if="typeName.value == item.leaveType">
								{{typeName.name}}
							</span>
						</span>
					</p>
				</span>
			</u-list-item>
			<view class="more">
				<view v-show="eliminateList.length < total && eliminateList.length!=0">------ 上滑加载更多 ------</view>
				<view v-show=" eliminateList.length>= total && eliminateList.length!=0">------ 已加载全部 ------</view>
			</view>
			<u-empty style="margin-top:100px" v-if="eliminateList.length==0" mode="search" :iconSize="140"
				:textSize="24" icon="http://cdn.uviewui.com/uview/empty/search.png" />
		</u-list>

		<u-popup :show="checkForm" @close="closeForm" mode="center" :round="10">
			<view class="check-form">
				<h3>销假详细信息</h3>
				<p>学生姓名：{{eliminateData.stuName}}</p>
				<p>学生学号：{{eliminateData.sno}}</p>
				<p>
					<span style="display:inline-block;width:50%">天数：{{eliminateData.duration / 10}}天</span>
					<span style="display:inline-block;width:50%">类型：
						<span v-for="(typeName,index) in LeaveTypeOptions" :key="index"
							v-if="typeName.value == eliminateData.leaveType">
							{{typeName.name}}
						</span>
					</span>
				</p>
				<p>开始时间：{{eliminateData.beginTime}}</p>
				<p>结束时间：{{eliminateData.endTime}}</p>
				<p>销假时间：{{eliminateData.createTime}}</p>
				<p>请假原因：{{eliminateData.cause}}</p>
				<p>
					销假地点：
					<map style="width: 50vw; height: 50vw;" :latitude="jwd.latitude" :longitude="jwd.longitude"
						enable-zoom="true" :markers="jwd" />
				</p>
				<p>
					销假照片：
					<u--image :showLoading="true" :src="imgPath(eliminateData.path)" width="50vw" height="50vw"
						@click="checkPhone(eliminateData.path)" />
				</p>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		listEliminate,
		getEliminate
	} from "@/api/backend/eliminate";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import config from '@/config'

	export default {
		name: "stuEliminateList",
		data() {
			return {
				checkForm: false,
				selName: null,
				selType: 0,
				pageNum: 1,
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					stuName: null,
					leaveType: 0,
				},
				// 总条数
				total: 0,
				// 请假审核表格数据
				LeaveTypeOptions: [],
				eliminateList: [],
				eliminateData: [],
				jwd: [],
			}
		},
		onLoad() {
			this.changeType(0);
			getDicts("leave_types").then((response) => {
				//遍历字典数组并重新赋值LeaveTypeOptions
				this.LeaveTypeOptions = response.data.map(item => {
					return {
						name: item.dictLabel,
						value: item.dictValue
					};
				});
			});
		},
		methods: {
			imgPath(path) {
				return config.baseUrl + path;
			},
			/** 查询请假审核列表 */
			getList() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				listEliminate(this.queryParams).then(response => {
					this.eliminateList = response.rows;
					this.total = response.total;
				});
			},
			getEliminateList() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 5,
					stuName: this.selName,
					leaveType: this.selType + 1,
				}
				this.getList();
			},
			checkEliinateInfo(id) {
				this.checkForm = true;
				getEliminate(id).then(response => {
					this.eliminateData = response.data;
					let location = this.eliminateData.location.split(" ");
					this.jwd.longitude = location[0]; //经度
					this.jwd.latitude = location[1]; //纬度
					this.jwd.push({
						longitude: this.jwd.longitude,
						latitude: this.jwd.latitude,
						iconPath: '../../static/images/location.png',
						title: "销假位置",
						width: 25,
					})
				})
			},
			closeForm() {
				this.checkForm = false;
				this.jwd = [];
			},
			scrolltolower() {
				if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
					this.queryParams = {
						pageNum: this.queryParams.pageNum + 1,
						pageSize: 5,
						stuName: this.selName,
						status: this.selStatus + 1,
					}
					listEliminate(this.queryParams).then(response => {
						this.eliminateList = this.eliminateList.concat(response.rows);
						this.total = response.total;
					})
				}
			},
			changeType(index) {
				if (index == this.selType) {
					this.selType = -1;
				} else {
					this.selType = index;
				}
				this.getEliminateList();
			},
			clearStuName() {
				this.queryParams.stuName = "";
				this.selName = "";
				this.getList();
			},
			checkPhone(url) {},
		},
	}
</script>

<style scoped lang="scss">
	.search {
		padding: 10px 10px 0px 10px;
		background-color: #F1F1F1;
	}

	.scarch-name {
		margin-top: 20rpx;
		background-color: white;
	}

	.scarch-btn-box {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
	}

	.scarch-btn {
		border-radius: 100px 100px 100px 100px;
	}

	.scarch-subsection {
		margin-top: 10px;
		background-color: white;
	}

	.list-box {
		max-height: 84.6vh;
	}

	.list-item {
		background-color: white;
		width: 86%;
		margin: 10px 7% 10px 7%;
		padding: 15px;
		border-radius: 10px;
		box-shadow: lightgray 0px 0px 10px;
	}

	.list-item>span>p {
		margin: 8px;
	}

	.list-item-tag {
		display: inline-block;
		float: right;
	}

	.check-form {
		padding: 20px;
		width: 90vw;
		max-height: 70vh;
		overflow-y: auto;
	}

	.check-form>p {
		margin: 5px 10px 10px 10px;
	}

	.check-form>h3 {
		width: 80vw;
		text-align: center;
		margin-bottom: 15px;
	}

	.more {
		width: 708rpx;
		height: 100rpx;
		margin: 10rpx 22rpx 30rpx 22rpx;
		padding: 0 20rpx 0 0;
		color: rgb(116, 116, 116);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
